<template>
    <div v-if="!isJoin">
        <div class="remote1" v-loading="loading" :element-loading-text="loadingText" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
            <div class="shade">
                <div class="input-container">
                    <input type="text" v-model="account" placeholder="请输入你的昵称" @keyup.enter="join">
                    <button @click="join">确定</button>
                </div>
            </div>
            <div class="userList" v-if="0">
                <h5>在线用户：{{userList.length}}人</h5>
                <p v-for="v in userList" :key="v.account">
                    {{v.account}}
                    <i v-if="v.account === account || v.account === isCall">
                        {{v.account === account ? 'me' : ''}}
                        {{v.account === isCall ? 'calling' : ''}}
                    </i>
                    <span @click="apply(v.account)" v-if="v.account !== account && v.account !== isCall">呼叫 {{v.account}}</span>
                </p>
            </div>
            <div class="video-container" v-show="isToPeer">
                <div>
                    <video src="" id="rtcA" controls autoplay></video>
                    <h5>{{account}}</h5>
                    <button @click="hangup">hangup</button>
                </div>
                <div>
                    <video src="" id="rtcB" controls autoplay></video>
                    <h5>{{isCall}}</h5>
                </div>
            </div>
        </div>
    </div>
    <div v-else>
        <div class="box" v-loading="loading" :element-loading-text="loadingText" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
            <!-- </div> -->
            <div class="left">
                <div class="hede" :title="account">
                    <img src="https://image.artyears.cn/image/2019-08/mini_c_57461791-ad5f-a576-09fd-198a0b01ffef?imageView2/1/w/200/h/200/q/200" alt="">
                </div>
                <div class="tog">
                    <div class="chat pointer" title="在线学员" @click="setChatType('round')">
                        <i class="iconfont el-icon-chat-line-round" v-if="chatType=='round'"></i>
                        <i class="iconfont el-icon-chat-round" v-else></i>
                    </div>
                    <div class="addressList pointer" @click="setChatType('solid')" title="所有学员">
                        <i class="iconfont el-icon-user-solid" v-if="chatType=='solid'"></i>
                        <i class="iconfont el-icon-user" v-else></i>
                    </div>
                    <div class="addressList pointer" @click="dialogVisible = true" title="设置">
                        <i class="iconfont el-icon-s-tools" v-if="chatType=='setting'"></i>
                        <i class="iconfont el-icon-setting" v-else></i>
                    </div>
                </div>
            </div>
            <div class="center">
                <!-- <div class="type"> -->
                <!--                         <i class="iconfont el-icon-s-platform pointer" @click="getDisplayMedia"></i>
<i class="iconfont el-icon-mic pointer" @click="info"></i>
<i class="iconfont el-icon-video-camera-solid pointer" @click="getUserMedia"></i>
<div>
    视频
</div>
<div>
    屏幕
</div> -->
                <!-- </div> -->
                <div class="input">
                    <el-input size="mini" placeholder="搜索" v-model="search">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                    <div class="plus" v-if=0>
                        <i class="el-icon-plus"></i>
                    </div>
                </div>
                <div class="lists">
                    <div class="list" v-for="(v,i) in userList" v-bind:key="v.account" @click="target=v" v-if="v.account!=account" :class="[(target &&　target.account==v.account)?'at':'']">
                        <div class="hede">
                            <img src="https://image.artyears.cn/image/2019-08/mini_c_57461791-ad5f-a576-09fd-198a0b01ffef?imageView2/1/w/200/h/200/q/200" alt="">
                        </div>
                        <div class="title">
                            <div class="name">{{v.account}}
                                <!-- <span class="pull-right time">刚刚</span> -->
                            </div>
                            <span @click="apply(v.account)" v-if="v.account !== account && v.account !== isCall && !isCall" class="pointer pull-right">呼叫</span>
                            <span @click="hangup" v-if="v.account !== account && v.account == isCall" class="pointer pull-right">挂断</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="title"><i class="el-icon-more pull-right pointer" @click="info"></i></div>
                <div class="top">
                    <div class="videoBox" v-show="isToPeer || isMedia|| true" id="eagleMapContainer" v-drag v-if="1">
                        <div class="rtcA" :class="[videobig=='rtcA'?'big':'small']" @click.stop="videobig='rtcA'" :title="videobig=='rtcA'?'':'点击放大'">
                            <video src="" id="rtcA" autoplay controls="controls" poster="https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=05b297ad39fa828bce239be3cd1e41cd/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg" muted></video>
                        </div>
                        <div class="rtcB" :class="[videobig=='rtcB'?'big':'small']" @click.stop="videobig='rtcB'" :title="videobig=='rtcB'?'':'点击放大'" v-show="isToPeer">
                            <video src="" id="rtcB" autoplay poster="https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=0c78105b888ba61ec0eece2f713597cc/0e2442a7d933c8956c0e8eeadb1373f08202002a.jpg"></video>
                        </div>
                        <span id="tz" @mousedown.stop="dragEagle" title="拖动调整大小"></span>
                    </div>
                    <div class="textLists">
                        <div class="textList" v-for="(v,i) in pageChat" v-bind:key="i" :class="[v.self==account?'this':'']">
                            <div class="hede">
                                <img src="https://image.artyears.cn/image/2019-08/mini_c_57461791-ad5f-a576-09fd-198a0b01ffef?imageView2/1/w/200/h/200/q/200" alt="">
                            </div>
                            <div class="text">
                                <i :class="[v.self==account ? 'el-icon-caret-right' : 'el-icon-caret-left']"></i>
                                {{v.text}}</div>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div>
                        <!-- <i class="el-icon-service"></i> -->
                        <!-- <i class="iconfont pull-left el-icon-picture-outline-round pointer" @click="info"></i> -->
                        <!-- <i class="iconfont pull-left el-icon-folder-opened pointer" @click="info"></i> -->
                        <i class="iconfont pull-left el-icon-chat-dot-round pointer" @click="isShowTextarea=!isShowTextarea" title="弹幕助手"></i>
                        <!-- <i class="iconfont el-icon-camera"></i> -->
                        <el-button size="mini" plain @click="sendText">开始直播</el-button>
                        <el-button size="mini" plain @click="sendText">录制</el-button>
                    </div>
                    <div v-if="isShowTextarea">
                        <el-input type="textarea" resize="none" :rows="4" placeholder="请输入内容" v-model="text"></el-input>
                        <el-button size="mini" plain @click="sendText">发送</el-button>
                    </div>
                </div>
            </div>
        </div>
        <!-- <button @click="getDisplayMedia">分享屏幕</button> -->
        <!-- <button @click="getUserMedia">分享摄像头和麦克风</button> -->
        <!-- <setting></setting> -->
        <!-- <input type="file"> -->
        <!-- <el-button @click="binary">binary</el-button> -->
        <!-- <el-button @click="showFile">showFile</el-button> -->
        <el-dialog title="课程模式" :visible.sync="dialogVisible" width="50%">
            <!-- <span>这是一段信息</span> -->
            <template>
                <el-radio v-model="mediaType" label="getDisplayMedia">屏幕</el-radio>
                <el-radio v-model="mediaType" label="getUserMedia">摄像头和麦克风</el-radio>
            </template>
            <br><br>
            <div style="text-align: left;" v-if="mediaType=='getDisplayMedia'">
                此模式下可共享:
                <br>a.整个屏幕< 音频可选>;
                    <br>b.某个打开的应用;
                    <br>c.浏览器的某个标签 < 音频可选>;
            </div>
            <div v-else style="text-align: left;">
                此模式下可共享:
                <br>a.摄像头和麦克风
            </div>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <el-button type="primary" @click="setMedia">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script type="text/babel">
    import admin from './admin.js'

  export default {
    ...admin
  }
</script>
<style type="stylesheet/scss" lang="scss" scoped>
    @import './admin.scss';
</style>
<style>
.el-textarea__inner,
.el-input__inner {
    background: rgb(50, 54, 57);
}
</style>